<!--
 * @Author: your name
 * @Date: 2021-05-21 09:05:27
 * @LastEditTime: 2021-05-21 15:45:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cesium-vue\src\components\HelloWorld.vue
-->

<template>
  <div class="home">
    <div class="head">
      <nav-bar></nav-bar>
    </div>
    <!-- <left-side></left-side> -->
    <div id="cesiumContainer"></div>
    <right-table v-show="showRightTable" v-on:close="closeRightTable" :properties="properties"></right-table>
    <hud v-show="showHud"></hud>
    <info-panel v-show="showDetail" v-on:close="closeDetail" :properties="detailData"></info-panel>
 
  </div>
</template>

<script type="module">
import NavBar from '@/components/NavBar'
import ModelUtil from '@/assets/js/cesium/ModelUtil'
import ServiceUtil from '@/assets/js/cesium/ServiceUtil'
import PostProcessUtil from '@/assets/js/cesium/PostProcessUtil'
import OSMBuildingUtil from '@/assets/js/cesium/OSMBuildingUtil'
import AnimationDemo from '@/assets/js/cesium/AnimationDemo'
import SceneUtil from '@/assets/js/cesium/SceneUtil'
import EventUtil from '@/assets/js/cesium/EventUtil'
import Analysis from '@/assets/js/cesium/Analysis'
import RightTable from '@/components/UI/RightTable'
import Hud from '@/components/UI/Hud'
import InfoPanel from '@/components/UI/InfoPanel'

// import LeftSide from '@/components/LeftSide'
export default {
  data() {
    return {
      showRightTable:false,
      showDetail:false,
      showHud:false,
      properties:{},
      detailData:{},
      map: {},
    };
  },
  computed:{

  },
  components: {
    NavBar,RightTable,Hud,InfoPanel
  // LeftSide
  },

  created() {    Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZTRmNjRkMi05YWQ1LTRiMmItOTU2Yi0yZDc3ZTg5NjQ2NjYiLCJpZCI6Mzc2OTIsImlhdCI6MTYyNzI3MjkyN30.Ihzm6Q4EmV6NsZGkhiHqS1PiM3L7YJAWWyJ_Xzm6pGM";
},
  mounted() {

    global.viewer =new Cesium.Viewer("cesiumContainer",
    {
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}),
      infoBox:false,
      // animation:false,
      timeline:false
    }
    ); 
    this.preProcess();
  },
  methods: {
    preProcess(){
      global.viewer.scene.debugShowFramesPerSecond = true;
      global.viewer.scene.globe.depthTestAgainstTerrain = true;
      global.modelUtil =new ModelUtil(viewer);
      global.serviceUtil =new ServiceUtil(viewer);
      global.postProcessUtil =new PostProcessUtil(viewer);  
      global.postProcessUtil.bindEvent(this.openRightTable);
      global.postProcessUtil.bindEvent(this.openDetail);
      global.postProcessUtil.loadFeaturePicker();
      global.osmBuildingUtil =new OSMBuildingUtil(viewer);
      global.animationDemo =new AnimationDemo(viewer);
      global.sceneUtil =new SceneUtil(viewer,modelUtil);
      global.eventUtil =new EventUtil(viewer);
      global.analysis =new Analysis();
    },
    openRightTable(e)
    {
      if(!e.openRight){
        return;
      }
      this.properties =e.properties;
      this.showRightTable =true;
    },
    closeRightTable(){
      this.showRightTable =false;
    },
    openDetail(e){
      if(!e.openDetail){
        return;
      }
      this.showDetail =e.openDetail;
      this.detailData =e.properties;
    },
    closeDetail(){
      this.showDetail =false;
    }
  }
};
</script>
 
<style scoped>
.home {
  height: 100vh;
}
.head{
  position:absolute;
  height:60px;
  top:0;
  z-index:1;
  width:100%;
  background-color: rgba(0,0,0,0.6);
}
#cesiumContainer {
    height: 100%;
    border: 1px solid gray;
}
:deep()
.cesium-performanceDisplay-defaultContainer {
    position: absolute;
    top: 65px;
    right:0px;
    text-align: right;
}
/* v-deep.cesium-infoBox{
    top:150px;
    background: rgba(0,0,0,0.3);
} 

v-deep.cesium-infoBox-title{
  background: rgba(0,0,0,0.6);
} */

</style>